<template>
  <a-layout class="mainView">
      <a-layout-sider v-model:collapsed="collapsed">
        <div class="logoView" :style="{paddingLeft: collapsed ? '23px' : '0px'}">
          <div class="arcoSpace">
            <!-- <div class="arcoSpaceItem" style="margin-right: 8px;">
              <img src="@/assets/vue.svg" />
            </div> -->
            <div v-show="!collapsed" class="arcoSpaceItem">
              <h1>组态管理后台</h1>
            </div>
          </div>
        </div>
          <a-menu
            v-model:openKeys="openKeys"
            v-model:selectedKeys="selectedKeys"
            mode="inline"
            :theme="'dark'"
            :items="routeListCount"
            @click="handleMenuClick"
          />
      </a-layout-sider>
      <a-layout-content class="layoutRightContent">
        <a-layout-header style="height: 60px;">
          <MainHeader></MainHeader>
        </a-layout-header>
        <a-layout-content class="layoutContent">
          <router-view></router-view>
        </a-layout-content>
      </a-layout-content>
  </a-layout>
</template>

<script lang="ts" setup>
  import { ref, watch, computed, h } from "vue";
  import { useRouter } from 'vue-router';
  import { storeToRefs } from 'pinia';
  import { useRouterStore } from '@/store/router';
  import { useUserStore } from '@/store/user';
  import type { IRouterList } from "@/store/router/types";
  import MainHeader from "@/components/web/mainHeader.vue";
  import {
    CodepenOutlined,
    DatabaseOutlined
  } from '@ant-design/icons-vue';
  
  const router = useRouter();
  const routerStore = useRouterStore();
  const userStore = useUserStore();
  const { activeRouteItem, routeList } = storeToRefs(routerStore);
  const { collapsed } = storeToRefs(userStore);
  const openKeys = ref<string[]>([]);
  const selectedKeys = ref<string[]>([]);

  const routeListCount = computed(() => {
    return routeList.value.map(item => {
      let iconFn = null;
      if(item.icon === 'CodepenOutlined') {
        iconFn = () => h(CodepenOutlined)
      } else if(item.icon === 'DatabaseOutlined') {
        iconFn = () => h(DatabaseOutlined)
      }
      return {
        ...item,
        icon: iconFn
      };
    });
  });

  const handleMenuClick = (info: any) => {
    const parentItem = routeList.value.find(item =>   
      item.children && item.children.some(child => child.key === info.key) 
    );
    if(parentItem) {
      activeRouteItem.value = parentItem?.children?.find(child => child.key === info.key) as IRouterList; 
    } else {
      activeRouteItem.value = routeList.value.find(item => item.key === info.key) as IRouterList;
    }
    if(activeRouteItem) {
      selectedKeys.value = [info.key];
      router.push({path: activeRouteItem.value.path});
    }
  }

  watch(activeRouteItem, (newValue, oldValue)=>{
    if(activeRouteItem.value) {
      selectedKeys.value = [activeRouteItem.value.key as string];
      if(activeRouteItem.value.parentKey !== '0') {
        openKeys.value = [activeRouteItem.value.parentKey as string];
      }
    }
  }, {
    deep: true, // 深度侦听
    immediate: true
  })

</script>

<style scoped lang="scss">
::v-deep .ant-layout-header {
  padding-inline: 0;
  height: auto;
  // line-height: normal;
  z-index: 1;
}
.mainView {
  width: 100%;
  height: 100%;
  .logoView{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    text-align: center;
    .arcoSpace {
      display: flex;
      align-items: center;
      .arcoSpaceItem {
        display: inline-block;
        align-items: center;
        h1 {
          color: #fff;
          font-size: 18px;
          margin: 0;
        }
      }
    }
  }
  .layoutRightContent {
    width: 100%;
    height: 100%;
    .layoutContent {
      height: calc(100% - 60px);
      width: 100%;
      padding: 20px;
      overflow: auto;
    }
  }
}
</style>